<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      status-icon
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <h3 class="title">Foxcore系统登录</h3>
      <div style="width:100%;text-align:center;margin:15px 0">
        <img src="../assets/img/icon_logo.png" alt style="width:100px" />
      </div>
      <el-form-item prop="account">
        <el-input
          type="text"
          v-model="account"
          auto-complete="off"
          placeholder="用户名"
          @keyup.enter.native="handleSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          type="password"
          v-model="pass"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code" class="pr">
        <el-input type="text" v-model="code" placeholder="验证码" @keyup.enter.native="handleSubmit"></el-input>
        <span
          @click="getCode"
          class="code-btn flex"
          style="outline:0;justify-content:center;align-items:center;cursor:pointer"
        >
          <span v-show="show">发送验证码</span>
          <span v-show="!show" class="count">{{count}} s</span>
        </span>
      </el-form-item>
      <el-form-item style="height:20px;pading:0px;text-align:right;color:blue;cursor:pointer;margin-top: -20px;">
        <span  @click="dialogFormVisible = true">忘记密码</span>
      </el-form-item>
      <el-form-item style="width:100%;margin-top: 15px;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>

    <!--忘记密码-->
    <el-dialog title="忘记密码" :visible.sync="dialogFormVisible" class=" forgetPass">
      
      <el-form :model="form">
        <el-form-item label="输入手机号" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" placeholder="输入手机号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="输入验证码" :label-width="formLabelWidth">
          <el-input type="text" v-model="form.code" placeholder="验证码" @keyup.enter.native="handleSubmit"></el-input>
              <span
          @click="getCodepass"
          class="code-btn flex"
          style="outline:0;justify-content:center;align-items:center;cursor:pointer"
        >
          <span v-show="show2">发送验证码</span>
          <span v-show="!show2" class="count">{{pass_count}} s</span>
        </span>
        </el-form-item>
        <el-form-item label="输入新密码" :label-width="formLabelWidth">
          <el-input v-model="form.pass" type="password" placeholder="输入新密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" :label-width="formLabelWidth">
          <el-input v-model="form.newpass" type="password" placeholder="确认新密码"  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit2()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import { SMSFORGET,RESETPWD,smsLogin } from "@/utils/api";
import { login } from "@/utils/api";
import { Message } from "element-ui";
import Cookies from "js-cookie";
const TIME_COUNT = 60; // 倒计时的时间
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
          mobile: '',
          code: '',
          pass: '',
          newpass: '',
        },
      pass_count:'',
      formLabelWidth: '120px',
      show: true,
      show2: true,
      count: "",
      timer: null,
      account: "",
      pass: "",
      code: ""
    };
  },
  methods: {
 
    getCodepass() {
      var _this = this;
      if (_this.form.mobile === "") {
        Message.error({ message: "请输入手机号" });
        return;
      }
      SMSFORGET({
        mobile: _this.form.mobile
      }).then(res => {
        // 验证码倒计时
        if (!this.timer) {
          this.pass_count = TIME_COUNT;
          this.show2 = false;
          this.timer = setInterval(() => {
            if (this.pass_count > 0 && this.pass_count <= TIME_COUNT) {
              this.pass_count--;
            } else {
              this.show2 = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      });
    },
    getCode() {
      var _this = this;
      if (_this.account === "") {
        Message.error({ message: "请输入用户名" });
        return;
      }
      smsLogin({
        account: _this.account
      }).then(res => {
        // 验证码倒计时
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      });
    },
    handleSubmit() {
      let _this = this;
      if(!_this.account || !_this.code || !_this.pass){
        this.$message.error("信息不能为空")
        return
      }

      login({
        account: _this.account,
        pass: _this.pass,
        code: _this.code
      }).then(res => {
        Message.success({ message: "登录成功" });
        sessionStorage.setItem("op-token", res.data);
        this.$router.push({ path: "index" });
      });
    },
    //忘记密码
    handleSubmit2() {
      let _this = this;
      if(!_this.form.mobile || !_this.form.code || !_this.form.pass){
        this.$message.error("信息不能为空")
        return
      }
      if(_this.form.pass !== _this.form.newpass){
        this.$message.error("两次密码不一致")
        return
      }
      
  
      RESETPWD({
        mobile: _this.form.mobile,
        pass: _this.form.pass,
        code: _this.form.code
      }).then(res => {
        Message.success({ message: "密码重置成功，请重新登录" });
        this.dialogFormVisible = false
      
        
      });

    }

  }
};
</script>

<style>
.forgetPass{
  width: 60%;
  margin: 0 auto;
}
.forgetPass .el-dialog__header{
  border-bottom: 1px solid #DCDFE6;
}
.forgetPass .el-dialog__body{
  padding:30px;
}
.login-container {
  width: 100%;
  height: 100%;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
.pr {
  position: relative;
}
.code-btn {
  width: 100px;
  height: 24px;
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 222;
  color: #f5a623;
  font-size: 14px;
  border: none;
  border-left: 1px solid #bababa;
  padding-left: 10px;
  background-color: #fff;
}
.title {
  text-align: center;
}
</style>